<script setup>
import router from "@/router/index.js"
import {useUserStore} from "@/stores/index.js"
import {ref, watch, onMounted} from "vue"
import ThemeComponent from "@/components/ThemeComponent.vue"
import {useRoute} from "vue-router"
import {userLogout} from "@/api/user.js";
import {Message} from "@arco-design/web-vue";

const nickname = ref('')
const avatar = ref('')

const selectedKeys = ref()
const route = useRoute()

const getUserInfo = () => {
  const userStore = useUserStore()
  nickname.value = userStore.nickname
  avatar.value = userStore.avatar
}
getUserInfo()

const logout = () => {
  userLogout()
    .then(res => {
      if (res.data.code === 1) {
        const userStore = useUserStore()
        userStore.clearUser()
        Message.success('退出成功')
        router.push('/login')
      }
    })
    .catch(err => {
      console.log(err)
    })
}

// 监听路由变化，更新 selectedKeys
watch(route, (newRoute) => {
  selectedKeys.value = [newRoute.path] // 直接使用当前路径作为 key
})

// 在组件挂载时设置初始选中项
onMounted(() => {
  selectedKeys.value = [route.path] // 设置为当前路由路径
})
</script>

<template>
  <div id="header-components">
    <div class="content-container">
      <div class="logo">
        橙籽
      </div>
      <a-menu mode="horizontal" class="menu" :selected-keys="selectedKeys">
        <a-menu-item key="/home" @click="router.push('/home')">首页</a-menu-item>
        <a-menu-item key="/user" @click="router.push('/user')">个人中心</a-menu-item>
        <a-menu-item key="/about" @click="router.push('/about')">关于</a-menu-item>
      </a-menu>
      <div class="user-container">
        <ThemeComponent class="theme-btn"></ThemeComponent>
        <a-dropdown position="bottom" trigger="hover">
          <a-button type="text" class="username-button" @click="router.push('/user')">
            <a-avatar :style="{ backgroundColor: '#3370ff' }" shape="square" class="avatar" :image-url="avatar">
              <IconUser/>
            </a-avatar>
            <div class="username">{{ nickname || '未登录' }}</div>
            <icon-down/>
          </a-button>
          <template #content>
            <a-doption v-if="nickname === ''" @click="router.push('/login')">去登录</a-doption>
            <a-doption v-else @click="logout">退出</a-doption>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<style scoped>
#header-components {
  width: 100%;
  height: 58px;
  background: var(--color-bg-2);
  box-shadow: 0px 2px 4px rgba(16, 38, 57, 0.1);
}

.content-container {
  display: flex;

  width: 70%;
  margin: 0 auto;
}

.menu {
  font-weight: 600;
}

.user-container {
  display: flex;
  align-items: center;
}

.theme-btn {
  margin-right: 10px;
}

.username-button, .username-button .a-avatar {
  height: 40px;
}

.username-button .avatar {
  margin-right: 8px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58px;
  width: 70px;
  font-size: 20px;
  color: #f1f1f1;
  background: linear-gradient(180deg, #ffb52b, #ff630f);
  font-weight: 600;
}

@media (max-width: 768px) {
  .content-container {
    width: 100%; /* Full width on mobile */
  }

  .username {
    display: none; /* Hide username on mobile */
  }
}
</style>
